<template>
  <div class="BusinessCenter">
    <div class="per-header">
      <p class="per-remind">
        <i class="el-icon-message-solid"></i>提醒：请完善个人资料
        ，选择证件类型并上传图片后点击下一步查看并补全基本信息
      </p>
    </div>
    <div class="tableData">
      <el-table
        ref="tableData"
        :data="tableData"
        style="width: 100%"
        highlight-current-row
        :header-cell-style="{ 'background-color': '#D9D9D9' }"
        stripe
      >
        <el-table-column label="业务序号" width="120%">
          <template slot-scope="scope" width="100%">
            <span>{{scope.row.id-1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="业务名称" width="800%"></el-table-column>
        <el-table-column label="业务申请">
          <template slot-scope="scope" width="100%">
            <el-button size="mini" type="text" @click="notice(scope.$index, scope.row)">申请须知</el-button>
          </template>
        </el-table-column>
        <el-table-column label="业务申请">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="applyfor(scope.$index, scope.row)">申请</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 申请须知 -->
    <el-dialog title="申请须知" :visible.sync="noticeshow" width="60%">
      <div class="notice-img" v-for="(item, index) in images" :key="index">
        <img :src="imagehttp + item" alt />/
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="noticeshow = false">取 消</el-button>
        <el-button type="primary" @click="noticeshow = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 补全信息提示 -->
    <el-dialog title="温馨提示" :close-on-click-modal="false" :visible.sync="remind" width="25%" @close="exit">
      <span>
        您的个人信息不够完整，请完成个人信息，再进行申请，如有疑问请联系客服人员：028-69000891
        或者 028- 69000892
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="exit">取 消</el-button>
        <el-button type="primary" @click="ensure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      tableData: [],
      //申请须知
      noticeshow: false,
      noticeimg: "",
      //补全信息提示
      remind: false,
      //图片数据
      images: [],
      //图片地址
      imagehttp: "",
    };
  },
  methods: {
    ...mapMutations(["changeAllBusState", "changeAllBusStyle"]),
    // 弹窗取消
    exit(){
      this.remind = false;
      this.$router.push("/");
    },
    //弹窗确定
    ensure() {
      this.remind = false;
      this.$router.push(this.$store.getters.basicInfo);
      this.changeAllBusState(this.$store.getters.basicInfo);
      this.changeAllBusStyle("asidelog");
    },
    //申请须知
    notice(index, row) {
      this.noticeshow = true;
      this.$http.get("/trademark/class/findImgById", {
        params: {
          id: row.id,
        },
      }).then((res) => {
        if (res.data.code !== 200) return ;
        // this.imagehttp = res.config.baseURL + "/trademark";
        this.imagehttp = this.mconfig.host;
        this.images = res.data.data.split(",");
      });
    },
    // 申请
    applyfor(index, row) {
      console.log(row.id);
      this.$router.push({
        path: "/business/allBusiness/register",
        query: {
          id: row.id,
        },
      });
    },
    //分页api
    pagingaip() {
      this.$http.get("/trademark/class/findAll").then((res) => {
        if (res.data.code !== 200) return ;

        this.tableData = res.data.data;
      });
    },
  },
  beforeMount() {
    this.$store.state.finishStatus == 0 && (this.remind = true);
  },
  mounted() {
    this.pagingaip();
  },
};
</script>

<style lang="less" scoped>
.BusinessCenter {
  .per-header {
    width: 100%;
    height: 50px;
    color: #ff6633;
    background-color: #ffefea;
    line-height: 50px;
    border-radius: 8px;
    margin-bottom: 22px;
    .el-icon-message-solid {
      font-size: 20px;
      padding: 0 5px 0 20px;
    }
  }
  .notice-img {
    width: 100%;
    img {
      width: 100%;
    }
  }
  /deep/.el-table th > .cell {
    text-align: center;
  }
  /deep/.el-table .cell {
    text-align: center;
  }
}
</style>
